<template>
  <div>
    <el-dialog
      v-bind="$attrs"
      v-on="$listeners"
      @open="onOpen"
      @close="onClose"
      :title="title"
      :visible.sync="showDialog"
    >
      <el-row :gutter="15">
        <el-form
          ref="elForm"
          :model="subData"
          :rules="rules"
          size="medium"
          label-width="100px"
        >
          <el-col :span="14">
            <el-form-item label="课程编号" prop="rules">
              <el-input
                v-model="subData.cno"
                placeholder="请输入课程编号"
                clearable
                :style="{ width: '100%' }"
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="14">
            <el-form-item label="课程名" prop="rules">
              <el-input
                v-model="subData.cname"
                placeholder="请输入课程名"
                clearable
                :style="{ width: '100%' }"
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="14">
            <el-form-item label="课程类型" prop="rules">
              <el-select
                v-model="subData.ctype"
                multiple
                placeholder="请选择"
                clearable
              >
                <el-option
                  v-for="item in ctypeOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="14">
            <el-form-item label="课程学分" prop="rules">
              <el-input
                v-model="subData.cscore"
                placeholder="请输入课程学分"
                clearable
                :style="{ width: '100%' }"
              >
              </el-input>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <div slot="footer">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="handleConfirm">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import request from "../../../utils/request";

export default {
  inheritAttrs: false,
  components: {},
  // 接受父组件传递的值
  props: {
    addOrUpdateVisible: {
      type: Boolean,
      default: false,
    },
    subData: {
      type: Object,
      default: null,
    },
    title: {
      type: String,
    },
    options: {
      type: Array,
    },
    tag: {
      type: Number,
    },
  },
  data() {
    return {
      ctypeOptions: [
        {
          value: "0",
          label: "必修",
        },
        {
          value: "1",
          label: "选修",
        },
      ],
      rules: {
        account: [
          {
            required: true,
            message: "请输入账号",
            trigger: "blur",
          },
          {
            min: 5,
            max: 15,
            message: "长度在 5 到 15 个字符",
            trigger: "blur",
          },
        ],
        name: [
          {
            required: true,
            message: "请输入用户名",
            trigger: "blur",
          },
          {
            min: 2,
            max: 5,
            message: "长度在 2 到 5 个字符",
            trigger: "blur",
          },
        ],
        roles: [
          {
            required: true,
            message: "必须选择一个角色",
            trigger: "blur",
          },
        ],
      },
      // 控制弹出框显示隐藏
      showDialog: false,
    };
  },
  computed: {},
  watch: {
    // 监听 addOrUpdateVisible 改变
    addOrUpdateVisible() {
      this.showDialog = this.addOrUpdateVisible;
    },
  },
  created() {},
  mounted() {},
  methods: {
    onOpen() {},
    onClose() {
      this.$refs["elForm"].resetFields();
      this.$emit("changeShow", "false");
    },
    close() {
      this.$refs["elForm"].resetFields();
      this.$emit("changeShow", "false");
    },
    async handleConfirm() {
      let temp = 0;
      await this.$refs["elForm"].validate((valid) => {
        if (!valid) {
          this.$message({
            message: "请填好表单后提交",
            type: "warning",
          });
          temp = 1;
        }
      });
      if (temp) {
        return;
      }
      let data = await request({
        url: "",
        method: "post",
        data: {
          id: this.subData.id,
          name: this.subData.name,
          roles: this.subData.roles,
          status: this.subData.status,
          tag: this.tag,
          account: this.subData.account,
        },
      });
      if (data.data.code === "2000") {
        this.$message({
          message: data.data.msg,
          type: "success",
        });
      } else {
        this.$message({
          message: data.data.msg,
          type: "error",
        });
      }
      this.$emit("changeShow", "false");
    },
    // 弹出框关闭后触发
    handleClose() {
      // 子组件调用父组件方法，并传递参数
      this.$emit("changeShow", "false");
    },
    changeStatus(status) {
      status ^= 1;
    },
  },
};
</script>
<style>
</style>
